<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .wrapper {
            width: 1200px;
            margin: 0 auto;
        }

        .box1 {
            height: 200px;
            margin-bottom: 10px;
            background-color: pink;
        }

        .box2 {
            height: 400px;
            margin-bottom: 10px;
            background-color: orange;
        }

        .box3 {
            height: 2000px;
            background-color: gray;
        }

        .bar {
            position: absolute;
            top: 400px;
            right: 166px;
            float: left;
            width: 80px;
            font-style: 17px;
            text-align: center;
            color: aliceblue;
            background-color: gray;
        }

        .bar div {
            height: 70px;
            line-height: 70px;
            border-bottom: 1px solid #000;
        }

        .backtop {
            display: none;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
    <div class="bar">
        <div>天猫精灵</div>
        <div>淘宝精灵</div>
        <div class="backtop">返回顶部</div>
        <div>天猫超市</div>
        <div>精美礼品</div>
    </div>
    <script>
        //获取元素
        var box2 = document.querySelector('.box2')
        var box3 = document.querySelector('.box3')
        var bar = document.querySelector('.bar')
        var backtop = document.querySelector('.backtop')
        //盒子 距离顶部的距离
        var box2Top = box2.offsetTop
        var box3Top = box3.offsetTop
        var barTop = bar.offsetTop
        document.addEventListener('scroll', function () {
            if (window.pageYOffset >= box2Top) {
                bar.style.position = 'fixed'
                bar.style.top = barTop - box2Top + 'px'
            } else {
                bar.style.position = 'absolute'
                bar.style.top = barTop + 'px'
            }

            if (window.pageYOffset >= box3Top) {
                backtop.style.display = 'block'
            } else {
                backtop.style.display = 'none'
            }
        })
        //给返回顶部添加点击事件
        backtop.addEventListener('click', function () {
            animate(window, 0)
        })

        //修改动画函数
        function animate(obj, target, callback) {
            //防止多次点击，先清除一次定时器
            clearInterval(obj.timer)
            //缓动动画步长
            var tep = (target - window.pageYOffset) / 10
            //步长可能为负数和小数，所以先取整
            tep = tep > 0 ? Math.ceil(tep) : Math.floor(tep)
            //设置定时器
            obj.timer = setInterval(function() {
                //达到目标值，就清除定时器，停止动画
                if(window.pageYOffset == target) {
                    clearInterval(obj.timer)
                    //有回调函数则调用
                    callback && callback()
                } else {
                    window.scroll(0, window.pageYOffset + tep)
                }
            }, 15)
        }
    </script>
</body>

</html>